<template>
  <div>
    <i
      :class="`iconfont ${
        isScreenFull ? 'icon-quxiaoquanping_o' : 'icon-quanping_o'
      } icon`"
      @click="onToggle"
    ></i>
  </div>
</template>

<script>
import screenfull from "screenfull";
export default {
  name: "",
  data() {
    return {
      isScreenFull: false,
    };
  },
  methods: {
    onToggle() {
      screenfull.toggle();
    },
    change() {
      this.isScreenFull = screenfull.isFullscreen;
    },
  },
  mounted() {
    screenfull.on("change", this.change);
  },
  components: {},
};
</script>

<style scoped lang='scss'>
.icon {
  font-size: 35px;
}
</style>
